import React, { useEffect } from "react";
import "./Love.css";

function Love() {
  useEffect(() => {
    const createHeart = () => {
      const heart = document.createElement("div");
      heart.classList.add("heart");
      heart.style.left = Math.random() * 100 + "vw";
      heart.style.animationDuration = Math.random() * 3 + 2 + "s";
      document.body.appendChild(heart);

      setTimeout(() => {
        heart.remove();
      }, 5000);
    };

    const interval = setInterval(createHeart, 300);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div className="heart-container">
      <h1 style={{ fontSize: "40px", color: "pink", paddingBottom: "20px" }}>
        {"戒了烟我不习惯,没有你我怎么办"}
        <br></br>
        {"三年零一个礼拜,才学会怎么忍耐"}
        <br></br>
        {"你给过我的伤害,是没有一句责怪"}
        <br></br>
        {"戒了烟染上悲伤,我也不想,我也不想"}
      </h1>
    </div>
  );
}

export default Love;
